<template>
<div class="we-chat-applets-qrcode views-container">
    <el-dialog :visible.sync="dialogVisibleImg" width="80%" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <el-carousel autoplay="false" arrow="always" height="720px" indicator-position="none">
            <el-carousel-item v-for="(item, index) in 3" :key="index">
                <div class="flex-col flex-justify-c flex-align-c" style="height:720px;">
                    <div class="img-center" style="height:680px;width:90%;background-size:contain;" v-bind:style="{'background-image':`url(${getPath(index+1)})`}"></div>
                    <p style="font-size:16px;">—— 第{{index+1}}步 ——</p>
                </div>
            </el-carousel-item>
        </el-carousel>
    </el-dialog>
    <div class="wlm-table">
        <div class="warning">
            <div class="flex-row flex-justify-b flex-align-c">
                <div>
                    <p class="warning-title">二维码设置</p>
                    <p style="margin-top:10px;">使用微信扫一扫，扫订单核销二维码进入小程序进行核销</p>
                </div>
                <div>
                    <el-button style="margin-right:20px;" v-if="!isOpenEdit" size="small" plain class="orders-blue" @click="open">修改配置</el-button>
                    <el-switch v-model="formFormatData.formData.channel.sapp.switch" @change="switchChannel" active-value="1" inactive-value="0">
                    </el-switch>
                </div>
            </div>
        </div>
        <el-button type="text" @click="dialogVisibleImg = true">点击查看示例</el-button>
        <el-carousel :interval="99000" arrow="always" height="640px" indicator-position="none">
            <el-carousel-item v-for="(item, index) in 3" :key="index">
                <div class="flex-col flex-justify-c flex-align-c" style="height:640px;">
                    <div class="img-center" style="height:680px;width:90%;background-size:contain;" v-bind:style="{'background-image':`url(${getPath(index+1)})`}"></div>
                    <p style="font-size:16px;">—— 第{{index+1}}步 ——</p>
                </div>
            </el-carousel-item>
        </el-carousel>
        <div class="wlm-form">
            <section>
                <div class="wlm-form-content channel-card" style="padding:0;">
                    <el-form v-if="formFormatData.isOpendSetting" :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="230px" class="retail-form" label-position="right">
                        <el-form-item label="参数一">
                            <span style="margin-left:0;" class="pointer" @click="handleClipboard(formFormatData.formData.channel.sapp.authorized.url.replace(/amp;/g,''),$event)">{{formFormatData.formData.channel.sapp.authorized.url.replace(/amp;/g,'')}}</span>
                            <p v-if="formFormatData.formData.channel.sapp.authorized.url" class="form-help">点击复制链接</p>
                        </el-form-item>
                        <el-form-item label="参数一">
                            <span style="margin-left:0;" class="pointer" @click="handleClipboard(formFormatData.formData.channel.sapp.authorized.url.replace(/amp;/g,''),$event)">{{formFormatData.formData.channel.sapp.authorized.url.replace(/amp;/g,'')}}</span>
                            <p v-if="formFormatData.formData.channel.sapp.authorized.url" class="form-help">点击复制链接</p>
                        </el-form-item>
                        <div class="wlm-form-header flex-row" style="margin-bottom:20px;">微信扫一扫，扫“添加店员二维码”进入小程序添加店员
                            <!-- <p style="margin-left:8px;" class="form-help">启用并设置消息推送配置后，用户发给小程序的消息以及开发者需要的事件推送，都将被微信转发至该服务器地址中</p> -->
                        </div>

                        <el-form-item label="参数一">
                            <span style="margin-left:0;" class="pointer" @click="handleClipboard(formFormatData.formData.channel.sapp.authorized.url.replace(/amp;/g,''),$event)">{{formFormatData.formData.channel.sapp.authorized.url.replace(/amp;/g,'')}}</span>
                            <p v-if="formFormatData.formData.channel.sapp.authorized.url" class="form-help">点击复制链接</p>
                        </el-form-item>
                        <el-form-item label="参数二">
                            <span style="margin-left:0;" class="pointer" v-if="formFormatData.formData.channel.sapp.authorized&&!isOpenEdit" @click="handleClipboard(formFormatData.formData.channel.sapp.authorized.Token,$event)">{{formFormatData.formData.channel.sapp.authorized.Token}}</span>
                            <p v-if="formFormatData.formData.channel.sapp.authorized.Token&&!isOpenEdit" class="form-help">点击复制链接</p>
                            <div v-if="isOpenEdit" class="flex-row">
                                <el-input maxlength="32" v-if="isOpenEdit" v-model="formFormatData.formData.channel.sapp.authorized.Token"></el-input>
                                <el-button style="margin-left:10px;" type="text" @click="setRandom(32,'Token')">随机生成</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                    <div v-else class="status-main pos-center">
                        <div class="flex-row flex-justify-c">
                            <div class="flex-col">
                                <router-link tag="span" to="/channel/weChatAppletsChannelAdd">
                                    <el-button class="status-main-btn" type="success" style="background:rgb(104, 211, 135);border:none;"><i>
                                            <svg-icon class="status-main-svg" icon-class="weChatApplets" /></i>&nbsp; 立即接入</el-button>
                                </router-link>
                                <div class="flex-row flex-justify-e mar-top-4">
                                    <div>没有小程序，去<a target="_blank" href="https://mp.weixin.qq.com/" class="alink-blue">注册</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <div v-if="isOpenEdit" v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveForm" type="primary">保存</el-button>
        <el-button @click="isOpenEdit=false" size="small">取消</el-button>
    </div>
</div>
</template>

<script>
import {
  channelGet,
  channelSave
} from '@/api/channel'
import waves from '@/directive/waves' // Waves directive
import mixins from '@/mixins/mixins'
import clipboard from '@/utils/clipboard'
import ChooseFiles from '@/components/ChooseFiles/index'
export default {
  mixins: [mixins.getters('Form')],
  name: 'WeChatAppletsChannelQrcode',
  components: {
    ChooseFiles
  },
  directives: {
    waves
  },
  created() {

  },
  computed: {
    getPath() {
      return function(path) {
        return require(`@/assets/channel_wechat/step${path}.png`)
      }
    }
  },
  data() {
    return {
      isOpenEdit: false,
      dialogVisibleImg: false,
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'channel|sapp|logo',
          model: 'img'
        }
      },
      chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'channel|sapp|qrcode',
          model: 'img'
        }
      },
      formFormatData: {
        key: 'WeChatAppletsChannel',
        api: {
          editForm: {
            api: channelGet,
            params: {
              type: 'sapp',
              always: true
            },
            filters: {
              img: {
                bindInit: ['chooseLogoConfig', 'chooseBgConfig']
              }
            }
          },
          submitForm: channelSave
        },
        autofocusType: 1,
        isOpendSetting: false,
        formData: {
          type: 'sapp',
          channel: {
            sapp: {
              name: '',
              AppId: '',
              authorized: {},
              AppSecret: '',
              logo: [],
              qrcode: [],
              original: '',
              switch: '1'
            }
          }
        },
        rules: {

        }
      }
    }
  },
  methods: {
    setRandom(len, name) {
      len = len || 32
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /** **默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      this.formFormatData.formData.channel.sapp.authorized[`${name}`] = pwd
      console.log(pwd.length)
    },
    saveForm() {
      this.formFormatSubmit()
      this.isOpenEdit = false
    },
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editForm') {
        const { data: { data: listData = [] }} = response
        // console.log(Array.isArray(listData), '$listData')
        const isOpen = !Array.isArray(listData)
        //  || (Object.keys(listData)[0] === 'switch' && Object.keys(listData)['length'] === 0)
        this.formFormatData.isOpendSetting = isOpen
      }
    },
    open() {
      this.isOpenEdit = true
      // this.$alert('是否需要绑定其它微信小程序？', '通知', {
      //   showCancelButton: true,
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   callback: action => {
      //     if (action === 'confirm') {
      //       this.$router.push({
      //         path: '/channel/weChatAppletsChannelAdd?'
      //       })
      //     }
      //   }
      // })
    },
    switchChannel() {
      if (this.formFormatData.isOpendSetting) {
        channelSave(this.formFormatData.formData).then((res) => {
          const { data: { code }} = res
          if (code === 1) {
            this.$message.success('保存成功！~')
          }
        })
      } else {
        this.$message.error('请先接入微信公众号再开启！~')
        this.formFormatData.formData.channel.wechat.switch = '0'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.we-chat-applets-qrcode {}
</style>
